<template>
  <div ref="pie" class="pie" />
</template>

<script>
// 引入echarts
import echarts from 'echarts'
export default {
  name: 'PieCharts',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.pie)
    // 配置数据
    myChart.setOption({
      title: {
        text: '搜索引擎',
        subtext: 1048,
        left: 'center',
        top: 'center',
        subtextStyle: {
          fontSize: 25
        }
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            position: 'outside',
            normal: {
              formatter: '{b}:{c}' + '\n\r' + '({d}%)',
              show: true,
              position: 'left'
            }
          },
          labelLine: {
            show: true
          },
          data: [
            { value: 1048, name: '视频广告' },
            { value: 735, name: '联盟广告' },
            { value: 580, name: '邮件营销' },
            { value: 484, name: '直接访问' },
            { value: 300, name: '搜索引擎' }
          ]
        }
      ]
    })
    // 获取鼠标移上去的那条数据
    myChart.on('mouseover', (params) => {
      // 重新设置标题
      myChart.setOption({
        title: {
          text: params.data.name,
          subtext: params.data.value
        }
      })
    })
  }
}
</script>

<style scoped >
.pie {
  width: 100%;
  height: 100%;
}

</style>
